<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色信息</title>

<style type="text/css">
.by {
	padding: 10px;
}

.line {
	margin-top: 10px;
}
</style>

<link rel="shortcut icon"
	href="<c:url value="/easyui/css/images/favicon.ico"/>" />
<link rel="stylesheet" href="<c:url value="/css/flipclock.css"/>">
<link href="<c:url value="/css/CalcSS3.css"/>" rel="stylesheet"
	type="text/css" />
<link href="<c:url value="/css/index.css"/>" rel="stylesheet"
	type="text/css" />
<link href="<c:url value="/easyui/css/easyui.css"/>" rel="stylesheet"
	type="text/css">
<link href="<c:url value="/easyui/css/easyui_animation.css"/>"
	rel="stylesheet" type="text/css">

<link href="<c:url value="/easyui/css/easyui_plus.css" />"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/easyui/css/insdep_theme_default.css" />"
	rel="stylesheet" type="text/css">
<link href="<c:url value="/easyui/css/icon.css" />" rel="stylesheet"
	type="text/css">
<link
	href="<c:url value="/easyui/css/font-awesome-4.7.0/css/font-awesome.min.css" />"
	rel="stylesheet" type="text/css">
<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="<c:url value="/js/echarts.js"/>"></script>
<!--放入自定义的图表-->

<script type="text/javascript" src="<c:url value="/js/monitor.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/easyui/js/jquery.min.js"/>"></script>
<%--<script type="text/javascript" src="js/jquery.js"></script>--%>
<script type="text/javascript"
	src="<c:url value="/easyui/js/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/easyui/js/jquery.insdep-extend.min.js"/>">
	
</script>



</head>
<body>
<script type="text/javascript">
	$(function() {
		$("#append-role").linkbutton({
			onClick : function() {
				$("#yk-add-role").window("open");
			}
		});

		$("#all-role").linkbutton({
			onClick : function() {
				$("#yk-role-table").datagrid({
					url : "query-Page-Role-All",
					method : "post"
				});
				$("#yk-role-table").datagrid("reload");
			}
		});

		$("#deleting-role").linkbutton({
			onClick : function() {
				var row = $("#yk-role-table").datagrid("getSelected");
				if (row) {
					$.messager.confirm("询问", "你确定要删除吗？", function(v) {
						if (v) {
							$.post("delete-One-Role", {
								id : row.id
							}, function(r) {
								if (r.success) {
									$("#yk-role-table").datagrid("reload");
									$.messager.alert("提示", "删除成功！");
								} else {
									$.messager.alert("提示", r.message);
								}
							});
						}
					});
				} else {
					$.messager.alert("提示", "请选择要删除的角色！");
				}
			}
		});

		$("#modify-role").linkbutton({
			onClick : function() {
				var row = $("#yk-role-table").datagrid("getSelected");
				if (row) {
					$("#yk-update-role").window("open");
				} else {
					$.messager.alert("提示", "请选择要修改的角色！");
				}
			}
		});

		$("#yk-add-role-bb-cancel").linkbutton({
			onClick : function() {
				$("#yk-add-role").dialog("close");
			}
		});

		$("#yk-add-role-bb-ok").linkbutton({
			onClick : function() {
				$("#yk-role-f").form({
					onSubmit : function(params) {
						return $(this).form("validate");
					},
					success : function(r) {
						r = eval("(" + r + ")");
						if (r.success) {
							$("#yk-add-role").dialog("close");
							$("#yk-role-table").datagrid("reload");
							$.messager.alert("提示", "添加成功！");
						} else {
							$("#yk-add-role").dialog("close");
							$.messager.alert("提示", r.message);
						}

					}
				}).submit();
			}
		});

		$("#yk-role-table").datagrid({
					onBeforeSelect : function(index, row) {
						var row = $("#yk-role-table").datagrid("getSelected");
						var curRowindex = $("#yk-role-table").datagrid("getRowIndex", row);
						if (curRowindex != index) {
							return true;
						} else {
							$("#yk-role-table").datagrid("unselectRow", index);
							return false;
						}
					}
				});

		$("#empower-role").linkbutton({
			onClick : function() {
				var row = $("#yk-role-table").datagrid("getSelected");

				if (row) {
					var id = row.id;
					$("#yk-menubar-to-role-sq").dialog({
						onOpen : function() {
							$("#tree-role-menubar").tree({
								url : "get-Menubar-To-Grants?id=" + id
							});
						}
					});

					$("#yk-menubar-to-role-sq").window("open");
				} else {
					$.messager.alert("提示", "请选择要授权的角色！");
				}
			}
		});
		
		$("#role-grant-menubar-ave").linkbutton({onClick:function(){
			 $("<form method='post' action='grant-Menubar-To-Roles'>").appendTo(document.body).form({
			        onSubmit:function(params){   
			        	var row = $("#yk-role-table").datagrid("getSelected");
			           params.id = row.id;
			           var nodes = $("#tree-role-menubar").tree("getChecked");
			           if(nodes){
			               var j = 0;
			               for(var i = 0;i < nodes.length; i++){
			                  if(!(nodes[i].children)){
			                     params["mids["+ j +"]"] = nodes[i].id;
			                     j++;
			                  }
			               }
			           }
			        },
			        success:function(r){
			           r = eval("("+ r +")");
			           if(r.success){
			              $("#yk-menubar-to-role-sq").window("close");
			              $.messager.alert("提示", "角色授权成功！");
			           }else{
			               $.messager.alert("提示", r.message);
			           }
			        }                                                
			       
			   }).submit();
		}});
		
		$("#role-grant-menubar-close").linkbutton({
			onClick : function() {
				$("#yk-menubar-to-role-sq").window("close");
			}
		});

	});
</script>

	<table id="yk-role-table" class="easyui-datagrid"
		data-options="
	       fit:true,fitColumns:true, autoRowHeight:true,nowrap:false,rownumbers:true,
	           striped:true,singleSelect:true,toolbar:'#yk-role-control',
	           pagination:true,url:'query-Page-Role-All',method:'post',
	           pageSize:10,pageList:[10,20,30,40,50]
	       ">
		<thead>
			<tr>
				<th data-options="field:'checkbox',checkbox:true,width:20"></th>
				<th data-options="field:'id',width:20">角色ID</th>
				<th data-options="field:'text',width:30">角色名称</th>
				<th data-options="field:'rcreateTime',width:30">创建时间</th>
			</tr>
		</thead>
		<tbody>

		</tbody>
	</table>

	<div id="yk-role-control">
		<span><a id="append-role" class="easyui-linkbutton"
			data-options="iconCls:'icon-add'">添加角色</a> </span> <span><a
			id="modify-role" class="easyui-linkbutton"
			data-options="iconCls:'icon-edit'">修改角色信息</a> </span> <span><a
			id="deleting-role" class="easyui-linkbutton"
			data-options="iconCls:'icon-remove'">删除角色</a> </span> <span><a
			id="all-role" class="easyui-linkbutton"
			data-options="iconCls:'icon-reload'">显示所有角色</a> </span> <span><input
			id="query-role" class="easyui-searchbox"
			data-options="label:'搜索:',prompt:'请输入角色名称',width:300,
			     searcher:function(value,name){
			       $('#yk-role-table').datagrid({
			           url:'query-Roles-ByName',
			           method:'post',
			           queryParams:{text:value}
			       });
			       $('#yk-role-table').datagrid('reload');
			       $('#query-role').searchbox('clear');
			     }
			" />
		</span> <span><a id="empower-role" class="easyui-linkbutton"
			data-options="iconCls:'icon-more'">给角色授权</a> </span>
	</div>

	<div id="yk-menubar-to-role-sq" class="easyui-dialog"
		style="display: none; overflow: scroll;"
		data-options="title:'给角色授权',width:300,height:500,closed:true,
		             resizable:true,modal:true,bodyCls:'by',buttons:'#role-grant-menubar'">
		<ul id="tree-role-menubar"
			data-options="checkbox:true,method:'get',animate:true,lines:true"></ul>
	</div>
	<div id="role-grant-menubar">
		<a href="#" id="role-grant-menubar-ave" class="easyui-linkbutton"
			data-options="iconCls:'icon-ok'">保存</a> <a href="#"
			id="role-grant-menubar-close" class="easyui-linkbutton"
			data-options="iconCls:'icon-cancel'">关闭</a>
	</div>

	<div id="yk-update-role" class="easyui-dialog"
		data-options="title:'修改角色信息',width:500,height:200,closed:true,
	     href:'role-update',method:'get',bodyCls:'by',buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
				   $('#updaterolefm').form({
				        onSubmit:function(params){
				           return $(this).form('validate');
				        },
				        success:function(r){
				        r = eval('(' + r + ')');
				        if(r.success){
				            $('#yk-update-role').window('close');
				           $('#yk-role-table').datagrid('reload');
				           $.messager.alert('提示', '修改成功！');
				        }else{
				           $('#yk-update-role').window('close');
				           $.messager.alert('提示', r.message);
				        }
				        }
				   }).submit();
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
				$('#yk-update-role').window('close');
				}
			}],
			onLoad:function(){
			  var row = $('#yk-role-table').datagrid('getSelected');
			  var id = row.id;
			  $('#updaterolefm').form('load','query-One-Role?id=' + id);
			},
			onOpen:function(){
			  var row = $('#yk-role-table').datagrid('getSelected');
			  var id = row.id;
			  $('#updaterolefm').form('load','query-One-Role?id=' + id);
			}
			">
	</div>

	<div id="yk-add-role" class="easyui-dialog"
		data-options="title:'添加角色',width:500,height:150,closed:true,
	     href:'role-add',method:'get',bodyCls:'by',buttons:'#yk-add-role-bb',
			onOpen:function(){
			  $('#yk-role-f').form('clear');
			}">
	</div>
	<div id="yk-add-role-bb">
		<a href="#" id="yk-add-role-bb-ok" class="easyui-linkbutton"
			data-options="iconCls:'icon-ok'">保存</a> <a href="#"
			id="yk-add-role-bb-cancel" class="easyui-linkbutton"
			data-options="iconCls:'icon-cancel'">关闭</a>
	</div>


</body>
</html>